<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帮助中心</title>
    <link rel="stylesheet" href="../CSS/HelpCenter.css">
    <link rel="stylesheet" href="/public/CSS/public.css">
</head>

<body>
    <header>
        <h1>帮助中心</h1>
    </header>
    <section>
        <h2>API的使用</h2>
        <ul class="type">
            <li><a href="#APIDocumentation">商品网站API</a></li>
            <li><a href="#video">影视网站API</a></li>
            <li><a href="#weather">天气网站API</a></li>
            <li><a href="#photo">图片网站API</a></li>
        </ul>
        <div class="api-section">
            <div class="shopping-api">
                <h1 id="APIDocumentation">商品网站API使用教程</h1>
                <div>
                    <p>本接口文档描述了一个用于搜索苏宁商品的API。该API通过POST请求接收查询参数，并返回搜索结果。</p>

                    <h3>接口地址</h3>
                    <p><code>http://124.221.19.137:8980/search</code></p>

                    <h3>请求方法</h3>
                    <p><code>POST</code></p>

                    <h3>请求参数</h3>
                    <table>
                        <tr>
                            <th>参数名</th>
                            <th>类型</th>
                            <th>是否必须</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>query</td>
                            <td>String</td>
                            <td>是</td>
                            <td>搜索关键词</td>
                        </tr>
                    </table>

                    <h3>请求示例</h3>
                    <pre><code>{
    "query": "手机"
}</code></pre>
                    <h4>响应参数</h4>
                    <table>
                        <tr>
                            <th>参数名</th>
                            <th>类型</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>products</td>
                            <td>Array</td>
                            <td>商品列表</td>
                        </tr>
                    </table>

                    <h3>products 数组中的对象结构</h3>
                    <table>
                        <tr>
                            <th>参数名</th>
                            <th>类型</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>title</td>
                            <td>String</td>
                            <td>商品标题</td>
                        </tr>
                        <tr>
                            <td>img</td>
                            <td>String</td>
                            <td>商品图片链接</td>
                        </tr>
                        <tr>
                            <td>pinjia</td>
                            <td>String</td>
                            <td>购物评价</td>
                        </tr>
                        <tr>
                            <td>link</td>
                            <td>String</td>
                            <td>商品链接</td>
                        </tr>
                    </table>

                    <h3>响应示例</h3>
                    <pre><code>{
    "products": [
        {
            "title": "Apple iPhone 13",
            "img": "https://example.com/img1.jpg",
            "pinjia": "12000+",
            "link": "https://product.suning.com/0000000000/1000000000.html"
        },
        {
            "title": "Samsung Galaxy S21",
            "img": "https://example.com/img2.jpg",
            "pinjia": "1000+",
            "link": "https://product.suning.com/0000000000/1000000001.html"
        }
    ]
}</code></pre>

                    <h3>错误响应</h3>
                    <table>
                        <tr>
                            <th>状态码</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>200</td>
                            <td>成功获取数据</td>
                        </tr>
                        <tr>
                            <td>500</td>
                            <td>获取数据时出错</td>
                        </tr>
                    </table>


                    <h3>错误响应示例</h3>
                    <pre><code>{
    "error": "获取数据时出错"
}</code></pre>

                    <h3>调用示例</h3>
                    <p>使用fetch进行调用：</p>
                    <pre><code>fetch('http://124.221.19.137:8980/search', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query: '手机' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));</code></pre>

                    <h3>注意事项</h3>
                    <div class="note">
                        <ol>
                            <li>请求参数query必须提供，否则会返回错误。</li>
                            <li>响应数据为JSON格式，包含商品列表。</li>
                        </ol>
                    </div>
                </div>
            </div>
            <div class="video-api">
                <h1 id="video">影视网站API使用教程</h1>
                <div class="container">
                    <h3>概述</h3>
                    <p>本接口文档旨在详细描述视频搜索服务的API接口，包括请求方法、URL、请求参数、响应数据格式以及错误处理等内容。该服务允许用户通过关键字搜索视频资源，并返回相应的视频链接和信息。</p>

                    <h3>接口地址</h3>
                    <p><code>http://124.221.19.137:8980/movie</code></p>
                    <p><code>http://124.221.19.137:8980/tv</code></p>
                    <p><code>http://124.221.19.137:8980/anime</code></p>
                    <p><code>http://124.221.19.137:8980/variety</code></p>
                    <p><code>http://124.221.19.137:8980/video</code></p>

                    <h3>请求方法</h3>
                    <p><code>POST</code></p>

                    <h3>请求参数</h3>
                    <p>请求参数通过<code>POST</code>请求的<code>body</code>传递，使用<code>application/x-www-form-urlencoded</code>格式。
                    </p>
                    <table>
                        <tr>
                            <th>参数名</th>
                            <th>类型</th>
                            <th>是否必填</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>movie</td>
                            <td>string</td>
                            <td>是</td>
                            <td>搜索电影资源</td>
                        </tr>
                        <tr>
                            <td>tv</td>
                            <td>string</td>
                            <td>是</td>
                            <td>搜索电视剧资源</td>
                        </tr>
                        <tr>
                            <td>anime</td>
                            <td>string</td>
                            <td>是</td>
                            <td>搜索漫画资源</td>
                        </tr>
                        <tr>
                            <td>variety</td>
                            <td>string</td>
                            <td>是</td>
                            <td>搜索综艺资源</td>
                        </tr>
                        <tr>
                            <td>video</td>
                            <td>string</td>
                            <td>是</td>
                            <td>搜索资源</td>
                        </tr>
                    </table>

                    <h3>响应数据</h3>
                    <p>响应数据为<code>JSON</code>格式，具体字段如下：</p>

                    <h3>成功响应</h3>
                    <table>
                        <tr>
                            <th>状态码</th>
                            <th>描述</th>
                        </tr>
                        <tr>
                            <td>200</td>
                            <td>成功获取数据</td>
                        </tr>

                    </table>
                    <pre><code>[
  {
    "href": "视频链接",
    "img": "视频封面图片链接",
    "title": "视频标题"
  },
  {
    "href": "视频链接",
    "img": "视频封面图片链接",
    "title": "视频标题"
  }
]</code></pre>

                    <h3>示例</h3>
                    <h3>请求示例</h3>
                    <pre><code> $.post(http://124.221.19.137:8980/movie, { type }, function (data) {
 console.log(data);
      })
                    </code></pre>

                    <h3>响应示例</h3>
                    <pre><code>[
  {
    href: "https://www.cbhfox.com/cbhtv/673303.html"
    img:"https://pic1.imgyzzy.com/upload/vod/2024-08-13/202408131723522215.jpg"
    title:"电影1"
  },
  {
    href:"https://www.cbhfox.com/cbhtv/675363.html"
    img:"https://pic1.imgyzzy.com/upload/vod/2024-08-12/202408121723458726.jpg"
    title:"电影2""
  }
]</code></pre>

                    <h3>错误示例</h3>
                    <pre><code>{
  "error": "未找到相关视频资源"
}</code></pre>

                    <h3>注意事项</h3>
                    <div class="note">
                        <p>1. 请求参数<code>type</code>不能为空。</p>
                        <p>2. 响应数据中的<code>href</code>和<code>img</code>字段均为有效的URL链接。</p>
                        <p>3. 如果搜索结果为空，响应数据将返回一个空数组。</p>
                    </div>
                </div>
            </div>
            <div class="weather-api">
                <h1 id="weather">天气网站API使用教程</h1>
                <div class="weather-api">
                    <h4>一、概述</h4>

                    <p>本 API 用于获取指定城市的天气信息，包括当前天气和未来指定天数的天气情况，并在网页上进行展示。</p>

                    <h4>二、基础信息</h4>

                    <p>- 名称：Weather Query API</p>
                    <p>- 版本：1.0</p>

                    <h4>三、请求方式</h4>

                    <p>- 均为 GET 请求</p>

                    <h4>四、端点</h4>

                    <p>1. https://geoapi.qweather.com/v2/city/lookup?location={city}&key={key}</p>
                    <p>- 描述：根据输入的城市名称获取城市的详细信息。</p>
                    <p>- 参数：</p>
                    <p>- location（必填，字符串）：要查询的城市名称。</p>
                    <p>- key（必填，字符串）：您的 QWeather API 密钥。</p>
                    <p>- 响应：</p>
                    <p>- 成功（状态码 200）：</p>

                    <pre><code>{
    "code": 200,
    "location": [
        {
        "adm1": "省份名称",
        "adm2": "市名称",
        "country": "国家名称",
        "id": "城市 ID",
        "lon": "经度",
        "lat": "纬度",
        "name": "城市名称",
        "fxLink": "相关链接"
        }
    ]
}</code></pre>
                    <p>- 失败（状态码非 200）：</p>
                    <pre><code>{
    "code": 400,
    "message": "请输入正确的城市名称"
}</code></pre>

                    <p>2. https://devapi.qweather.com/v7/weather/now?location={city_id}&key={key}</p>
                    <p>- 描述：根据获取到的城市 ID 获取指定城市的实时天气信息。</p>
                    <p>- 参数：</p>
                    <p>- location（必填，字符串）：通过第一步获取到的城市 ID。</p>
                    <p>- key（必填，字符串）：您的 QWeather API 密钥。</p>
                    <p>- 响应：</p>
                    <p>- 成功（状态码 200）：</p>

                    <pre><code>{
    "code": 200,
    "now": {
        "obsTime": "观测时间",
        "icon": "天气状况图标代码",
        "text": "天气状况描述",
        "wind360": "风向360角度",
        "windDir": "风向",
        "windScale": "风力等级",
        "windSpeed": "风速",
        "humidity": "相对湿度",
        "precip": "降水量",
        "pressure": "大气压强",
        "vis": "能见度",
        "cloud": "云量",
        "uvIndex": "紫外线强度",
        "dressingIndex": "穿衣指数",
        "airQuality": {
            "aqi": "空气质量指数",
            "primary": "主要污染物",
            "pm25": "PM2.5",
            "pm10": "PM10",
            "no2": "二氧化氮",
            "so2": "二氧化硫",
            "co": "一氧化碳",
            "o3": "臭氧" 
        },
        "lifeIndex": {
            "ultraviolet": "紫外线指数",
            "comfort": "舒适度指数",
            "carWashing": "洗车指数",
            "sport": "运动指数" 
        }
    }
}</code></pre>

                    <p>- 失败（状态码非 200）：</p>

                    <pre><code>{
    "code": 400,
    "message": "获取天气数据失败" 
}</code></pre>

                    <h4>五、前端交互</h4>

                    <p>1. 页面加载时，默认显示“益阳”的天气信息。</p>
                    <p>2. 点击搜索按钮或按下回车键时，根据输入的城市名称获取天气信息。</p>
                    <p>3. 点击天数切换按钮，可以更改显示的未来天气天数。</p>

                    <h4>六、数据展示</h4>

                    <p>1. 城市信息：</p>
                    <table>
                        <tbody>
                            <tr>
                                <th>城市名称：</th>
                                <th>归属地：</th>
                                <th>城市编号、经度、纬度：</th>
                            </tr>
                            <tr>
                                <td>显示在相应的位置</td>
                                <td>以“省 - 市 - 地区”的格式显示。</td>
                                <td>显示在相应位置</td>
                            </tr>
                        </tbody>
                    </table>
                    <p>2. 当前天气：</p>
                    <ul>
                        <li>天气图片：根据天气状况显示相应图片。</li>
                    </ul>
                    <p>3. 未来天气：</p>
                    <ul class="type-weather">
                        <li><span>日期：</span>显示未来天气的日期。</li>
                        <li><span>天气图片：</span>根据天气状况显示相应图片。</li>
                        <li><span>天气状况：</span>显示未来几天的天气状况。</li>
                        <li><span>风向、风力：</span>显示未来几天的风向和风力。</li>
                        <li><span>降水量：</span>显示未来几天的降水量。</li>
                        <li><span>紫外线指数：</span>显示未来几天的紫外线指数。</li>
                        <li><span>舒适度指数：</span>显示未来几天的舒适度指数。</li>
                        <li><span>洗车指数：</span>显示未来几天的洗车指数。</li>
                        <li><span>运动指数：</span>显示未来几天的运动指数。</li>

                    </ul>

                    <h4>七、注意事项</h4>
                    <div class="note">
                        <p>1. 请在使用 API 之前仔细阅读 API 文档，确保您使用的 API 版本与文档一致。</p>
                        <p>2. 请不要将 API 密钥、城市名称、经纬度等信息公开，以防止数据泄露。</p>
                        <p>3. 请不要滥用 API，避免频繁调用，以免造成服务器压力。</p>
                        <p>4. 请不要将 API 用于商业用途，API 仅供个人学习交流使用。</p>
                        <p>5. 如有疑问，请联系开发者。</p>
                    </div>
                </div>
            </div>
            <div class="photoAPI">
                <h1 id="photo">图片网站API使用教程</h1>
                <div class="photo-api">
                    <h4>一、基本信息</h4>
                    <p>接口名称:http://124.221.19.137:8980/tupian</p>
                    <p>请求方法:POST</p>
                    <p>接口描述：根据用户提供的关键字搜索相关图片，并返回图片的 URL 列表。</p>
                    <h4>二、请求参数</h4>
                    <table>
                        <tbody>
                            <tr>
                                <th>参数名称:</th>
                                <th>参数类型:</th>
                                <th>必填项:</th>
                                <th>参数描述:</th>
                            </tr>
                            <tr>
                                <td>keyword</td>
                                <td>字符串</td>
                                <td>是</td>
                                <td>用户输入的用于搜索图片的关键字</td>
                            </tr>
                        </tbody>
                    </table>
                    <h4>三、响应</h4>
                    <h4>成功响应:</h4>
                    <table>
                        <tbody>
                            <tr>
                                <th>状态码：</th>
                                <th>响应：</th>
                            </tr>
                            <tr>
                                <td>200</td>
                                <td>JSON 数组</td>
                            </tr>
                        </tbody>
                    </table>
                    <h4>说明</h4>
                    <ul>
                        <li>数组中的每个元素都是一个图片的 URL 字符串。</li>
                    </ul>
                    <h4>失败响应:</h4>
                    <table>
                        <tbody>
                            <tr>
                                <th>状态码：</th>
                                <th>响应：</th>
                            </tr>
                            <tr>
                                <td>400</td>
                                <td>{"error":"无效的关键字"}</td>
                            </tr>
                            <tr>
                                <td>500</td>
                                <td>{"error":"服务器内部错误"}</td>
                            </tr>
                            <tr>
                                <td>404</td>
                                <td>{"error":"未找到与关键字相关的图片"}</td>
                            </tr>
                        </tbody>
                    </table>
                    <h4>说明</h4>
                    <ol>
                        <li>当输入的关键字不符合规定格式或为空时返回。</li>
                        <li>服务器在处理请求时发生内部错误。</li>
                        <li>在服务器根据关键字进行搜索但未找到匹配的图片时返回。</li>
                    </ol>
                    <h4>四、版本控制</h4>
                    <p>版本号:1.0</p>
                    <p>发布日期:2024年8月8日</p>
                    <h4>五、注意事项</h4>
                    <div class="note">
                        <p>1、请确保请求的关键字符合规定的格式和长度限制。</p>
                        <p>2、接口的响应时间可能会受到服务器负载和网络状况的影响。</p>
                    </div>
                </div>
            </div>
    </section>
    <button id="back-to-top" class="hidden">返回顶部</button>
</body>
<script src="/public/JS/jquery-3.7.0.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const backToTopButton = document.getElementById('back-to-top');

        // 当用户滚动时，显示或隐藏返回顶部按钮
        window.addEventListener('scroll', function () {
            if (window.pageYOffset > 300) {
                backToTopButton.classList.remove('hidden');
            } else {
                backToTopButton.classList.add('hidden');
            }
        });

        // 点击按钮时，平滑滚动到顶部
        backToTopButton.addEventListener('click', function () {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    });

</script>

</html>